import { CheckboxGroup, Checkbox } from "@design-system/widgets";
import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";

<Meta
  title="Design-system/Widgets/CheckboxGroup"
  component={CheckboxGroup}
  args={{
    label: "Checkbox Group",
    defaultValue: ["value-1"],
    children: (
      <>
        <Checkbox value="value-1">Value 1</Checkbox>
        <Checkbox value="value-2">Value 2</Checkbox>
      </>
    ),
  }}
/>

export const Template = (args) => <CheckboxGroup {...args} />;

# Checkbox Group

Checkbox Group is a group of checkboxes that can be selected together.

<Canvas>
  <Story name="Checkbox Group">{Template.bind({})}</Story>
</Canvas>

<ArgsTable story="Checkbox Group" of={CheckboxGroup} />

## Orientation

<Story
  args={{
    orientation: "vertical",
  }}
  name="Orientation - Vertical"
>
  {Template.bind({})}
</Story>
<Story
  args={{
    orientation: "horizontal",
  }}
  name="Orientation - Horizontal"
>
  {Template.bind({})}
</Story>

## Disabled

<Story
  args={{
    isDisabled: true,
  }}
  name="Is Disabled"
>
  {Template.bind({})}
</Story>

## Required

<Story
  args={{
    isRequired: true,
  }}
  name="Is Required"
>
  {Template.bind({})}
</Story>

## Invalid State

<Story
  args={{
    validationState: "invalid",
    errorMessage: "This is a error message",
  }}
  name="Invalid State"
>
  {Template.bind({})}
</Story>
